<template>
    <div class="mask" v-if="modelValue" @click.self="hideMask">

        <div class="cart-list">

            <van-swipe-cell v-for="item in cartList" :key="item.id">
                <van-card price="2.00" :title="item.goodsname">

                    <template #thumb>
                        <van-checkbox v-model="item.status" @change="cartUpdate(item)" style="float:left" shape="round" />
                        <br />
                        <img v-lazy="$baseUrl + item.img" class="goods-cover" />
                    </template>

                    <template v-slot:footer>
                        <van-stepper theme="round" v-model="item.num" @change="cartUpdate(item)" />
                    </template>

                </van-card>
                <template #right>
                    <van-button @click="del(item.id)" square text="删除" type="danger" class="delete-button" />
                    <van-button @click="goGoodsDetail(item.goodsid)" square text="查看" type="primary"
                        class="delete-button" />
                </template>
            </van-swipe-cell>

            <van-submit-bar :price="cartPrice" button-text="提交订单">
                <van-checkbox v-model="allChecked">全选</van-checkbox>
            </van-submit-bar>

            <!-- 无数据提示 -->
            <van-empty description="暂无购物车数据" v-if="cartList.length === 0" />
        </div>


    </div>
</template>

<script>
import { mapActions, mapState } from 'pinia';
import useCartStore from '@/store/cartStore';
export default {
    props: {
        modelValue: Boolean
    },
    computed: {
        ...mapState(useCartStore, ['cartList', 'cartPrice', 'originAllChecked']),
        allChecked: {
            get: function () {
                return this.originAllChecked;
            },
            set(value) {
                // 更新全选复选框的状态
                this.updateAllChecked(value);
            }
        }
    },
    mounted() {
        this.getCartList();
    },
    methods: {
        ...mapActions(useCartStore, ['getCartList', 'updateAllChecked', 'cartDelAction']),
        hideMask() {
            this.$emit('update:modelValue', false);
        },
        // 更新商品状态和数量
        cartUpdate({ id, num, status }) {
            // true=>1, false=>0
            status = status ? 1 : 0
            this.$axios.post('/cartedit', { id, num, status }).then(res => {
                if (res.code === 200) {
                    this.$toast(res.msg);
                }
            });
        },
        // 查看商品详情
        goGoodsDetail(id) {
            this.$router.push({
                name: 'goods', query: {
                    id
                }
            });
        },
        // 删除购物车商品
        del(id) {
            this.$dialog.confirm({
                title: '提示',
                message: '确认删除?',
                theme: 'round-button',
            })
                .then(() => {
                    this.cartDelAction(id);
                })
                .catch(() => { });
        }
    }
}
</script>

<style scoped lang="scss">
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;

    .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 30px;
    }

    .cart-list {
        position: absolute;
        bottom: 50px;
        left: 0;
        width: 100%;
        height: 240px;
        overflow: auto;
        background-color: #fff;
        border-radius: 10px 10px 0 0;
        box-shadow: 0px 0px 1px 1px #CCC;

        .goods-cover {
            height: 80px;
            width: 80px;
            margin-top: 10px;
        }

        .delete-button {
            height: 100%;
        }

    }
}
</style>